<template>
  <div>
    <img v-if="iconFlag" class="icon" :src="displayIcon" @error="loadError">
    <span v-else :class="[defaultIcon,icon]" />
  </div>
</template>
<script>
export default {
  name: 'IconShow',
  props: {
    src: {
      type: Object,
      default: null
    },
    defaultIcon: {
      type: String,
      default: 'fas fa-book-open'
    }
  },
  data() {
    return {
      iconFlag: true
    }
  },
  computed: {
    icon() {
      return this.src &&
        this.src.info &&
        this.src.info.icon &&
        this.src.info.icon.trim()
        ? this.src.info.icon.trim()
        : null
    },
    displayIcon() {
      try {
        return require(`@assets/image/${this.icon}`)
      } catch (ex) {
        this.loadError()
        return this.icon
      }
    }
  },
  watch: {
    src(newVal, oldVal) {
      this.iconFlag = true
    }
  },
  methods: {
    loadError() {
      this.iconFlag = false
    }
  }
}
</script>
<style scoped>
.icon {
  max-width: 70%;
  max-height: 70%;
}
</style>
